<template>
  <div class="header">
    <span class="header-left iconfont">&#xe624;</span>
    <div class="header-middle">
        <i class="icon-search iconfont">&#xe632;</i>
        <span class="input">输入城市/景点/游玩主题</span>
    </div>
    <router-link class="header-right"
      tag="div"
      to="/city">
      <span class="city">{{ city }}</span>
      <i class="icon-arrow iconfont">&#xe6aa;</i>
    </router-link>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState([
      'city'
    ])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variables.styl'
  .header
    display flex
    width 100%
    height $headerHeight
    background $bgColor
    color #fff
    .header-left
      width .4rem
      line-height $headerHeight
      padding 0 .2rem
    .header-middle
      flex 1
      position relative
      height .6rem
      line-height .6rem
      margin .14rem 0
      padding 0 .2rem
      color #e4e7ea
      background #fff
      border-radius .06rem
      .input
        white-space nowrap
        text-overflow ellipsis
    .header-right
      line-height $headerHeight
      padding 0 .22rem
      .city
        white-space nowrap
        text-overflow ellipsis
</style>
